<template>
  <view class="component">
    <view class="title" style="height: 70rpx!important;padding-top: 30rpx;">
      <view class="label">促销活动<text style="font-size: 26rpx;">({{ dataSource.length || 0 }})</text></view>
      <view class="more">
        <!-- <uni-icons type="forward" size="20"></uni-icons> -->
      </view>
    </view>
    <view class="content" style="padding-bottom: 0;">
      <view class="list" v-for="(item, index) of dataSourceList" :key="index">
        <view class="title" style="height: 60rpx!important;">
          <view class="label" >{{ item.title }}</view>
          <view class="more">
            <!-- <uni-icons type="forward" size="20"></uni-icons> -->
          </view>
        </view>
        <view class="content" :key="index">
          <view class="poster">
            <image :src="item.img" mode="aspectFill"></image>
          </view>
          <view class="tips">
            <view class="label">活动倒计时： </view>
            <view class="value">{{ item.timeStr }}</view>
          </view>
        </view>
      </view>
      <StEmpty v-if="isEmpty">暂无促销活动</StEmpty>
    </view>
  </view>
</template>
<script>
import StEmpty from '@/components/st-empty/st-empty.vue';
export default {
  components: {
    StEmpty
  },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    isEmpty: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataSourceList: this.dataSource,
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {
    this.renderData();
    this.timer = setInterval(() => {
      this.renderData();
    }, 1000);
  },
  methods: {
    renderData() {
      this.dataSourceList.forEach((item, index) => {
        let countDown = this.countDown(item.endtime);
        if (countDown.day == '00' && countDown.hour == '00' && countDown.minute == '00' && countDown.second == '00') {
          item.timeStr = '活动已结束';
          return;
        }
        let timeStr = `${countDown.day}天 ${countDown.hour}:${countDown.minute}:${countDown.second}`;
        this.$set(this.dataSourceList[index], 'timeStr', timeStr);
      });
    },

    // 根据时间戳倒计时
    countDown(time) {
      let now = new Date().getTime();
      let diff = time * 1000 - now;
      let day = Math.floor(diff / (24 * 60 * 60 * 1000));
      let hour = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
      let minute = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
      let second = Math.floor((diff % (60 * 1000)) / 1000);
      return {
        day: day < 10 ? '0' + day : day,
        hour: hour < 10 ? '0' + hour : hour,
        minute: minute < 10 ? '0' + minute : minute,
        second: second < 10 ? '0' + second : second,
      }
    }
  }
};
</script>
<style lang='less' scoped>
.component {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    height: 90rpx;

    .label {
      font-size: 32rpx;
      color: #333;
      /* font-weight: 600; */
      font-size: 15px;
      line-height: 18px;
    }

    .more {
      font-size: 28rpx;
      color: #999;
    }
  }

  .content {
    padding: 0 32rpx 30rpx;

    .poster {
      width: 100%;
      height: 300rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 32rpx;
      }
    }

    .tips {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 24rpx;
      color: #999;
      padding: 24rpx 10rpx 0;
    }
  }
}</style>